<template>
  <div class="bssgpContainer">
    <div class="bssgpCard" v-for="(option, index) in options" :key="index">
      <card_e :image-url="option.image">
        <card_sub_b />
      </card_e>
    </div>
  </div>
</template>

<script setup lang="ts">
import { i18nt } from "@/i18n";
import card_e from "@/components/cards/card_e.vue";
import card_sub_b from "@/components/cards/card_sub_b.vue";

const msg = i18nt.value.constantsOne.SuperM;

const options = [
  {
    image: new URL("@/assets/png/bss/gp1.png", import.meta.url).href,
    title: msg.testcardTitle,
    sub: msg.testStr,
  },
  {
    image: new URL("@/assets/png/bss/gp2.png", import.meta.url).href,
    title: msg.testcardTitle,
    sub: msg.testStr,
  },
  {
    image: new URL("@/assets/png/bss/gp3.png", import.meta.url).href,
    title: msg.testcardTitle,
    sub: msg.testStr,
  },
  {
    image: new URL("@/assets/png/bss/gp4.png", import.meta.url).href,
    title: msg.testcardTitle,
    sub: msg.testStr,
  },
];
</script>

<style scoped lang="scss">
.bssgpContainer {
  @include rel_cen_hw(407px, 100%);
  flex-direction: row;
  justify-content: space-between;
  .bssgpCard {
    @include rel_cen_hw(407px, 355px);
  }
}
</style>
